﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <link href="css/layout-default.css" rel="stylesheet" type="text/css" />
    <link href="css/layout-documentation.css" rel="stylesheet" type="text/css" />
    <link href="css/smoothness/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" />
    <link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
    <link href="css/apollo.css" rel="stylesheet" type="text/css" />
    
    <script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.8.13.custom.min.js" type="text/javascript"></script>
    <style>
        body 
        {
            font-family: Georgia,'Times New Roman',serif;
            font-size: 12px;
            line-height: 1.5em;
        }
        .largeFont 
        {
            font-size: 52px;
            font-family: Georgia,'Times New Roman',serif;
            font-weight: bold;
            color: #555555;
        }
        .smallFont 
        {
            font-size: 10px;
            color: Gray;
        }
    </style>

    <script type="text/javascript">



        (function ($) {
            jQuery.fn.procent = function (proc, options) {
                var jqObj = this;
                this.procent = proc;

                var settings = $.extend({
                    'bgLightColor': 'Yellow',
                    'bgDarkColor': 'Orange',
                    'fontLightColor': 'White',
                    'fontDarkColor': 'Gray',
                    'align': 'center'
                }, options);

                this.elemWidth = 0;
                this.elemHeight = 0;
                this.elemText = jqObj.text();
                this.elemTextOffset = 0;
                this.leftWidth = 0;
                this.rightWidth = 0;
                this.bgLightColor = settings.bgLightColor;
                this.bgDarkColor = settings.bgDarkColor;
                this.fontLightColor = settings.fontLightColor;
                this.fontDarkColor = settings.fontDarkColor;
                this.align = settings.align;

                var that = this;

                jqObj.calculateDimensions = function () {
                    // calculate width & height
                    this.elemWidth = this.width();
                    this.elemHeight = this.height();

                    // calculate left & right
                    this.leftWidth = parseInt(this.procent * this.elemWidth / 100);
                    this.rightWidth = this.elemWidth - this.leftWidth;

                    // calculate offset used to center the text
                    if (this.align == "center") {
                        var sensor = $('<span />').text(this.elemText);
                        this.append(sensor);
                        var elemTextWidth = sensor.width();
                        sensor.remove();

                        if (this.elemWidth < elemTextWidth)
                            this.elemTextOffset = 0;
                        else
                            this.elemTextOffset = (this.elemWidth - elemTextWidth) / 2;
                    }
                };

                jqObj.change = function (newProc) {
                    this.procent = newProc;

                    // recalculate left & right
                    this.leftWidth = parseInt(this.procent * this.elemWidth / 100);
                    this.rightWidth = this.elemWidth - this.leftWidth;

                    this.html(this.getHTML());
                }

                jqObj.getHTML = function () {
                    if (!this.elemText)
                        this.elemText = "&nbsp;";

                    try {
                        var iHTML =
            '<div style="position: relative; padding: 1px; border: 1px solid Black; width: ' + this.elemWidth + 'px; height: ' + this.elemHeight + 'px;">'
                        // Text
            + '<div style="overflow: hidden; width: ' + this.leftWidth + 'px; height: ' + this.elemHeight + 'px; position: relative;">'
              + '<div style="overflow: hidden; width: ' + this.elemWidth + 'px; position: relative; left: -' + this.rightWidth + 'px; background-color: ' + this.bgDarkColor + '">'
                + '<div style="position: relative; left: ' + this.rightWidth + 'px;">'
                  + '<span style="color: ' + this.fontLightColor + '; margin-left: ' + this.elemTextOffset + 'px;">' + this.elemText + '</span>'
                + '</div>'
               + '</div>'
              + '</div>'
                        // Text shadow
            + '<div style="overflow: hidden; width: ' + this.rightWidth + 'px; height: ' + this.elemHeight + 'px; position: relative; top: -' + this.elemHeight + 'px; left: ' + this.leftWidth + 'px;">'
              + '<div style="position: relative; left: -' + this.leftWidth + 'px; width: ' + this.elemWidth + 'px; background-color: ' + this.bgLightColor + '">'
                + '<span style="color: ' + this.fontDarkColor + '; margin-left: ' + this.elemTextOffset + 'px">' + this.elemText + '</span>'
              + '</div>'
            + '</div>'
          + '</div>';
                    } catch (ex) { alert(ex); }

                    return iHTML;
                };

                jqObj.calculateDimensions();

                jqObj.html(jqObj.getHTML());

                return jqObj;
            };
        })(jQuery);

        var t = null;
        function rndT() {
            if (t) {
                t.change(Math.random() * 100);
            }

            setTimeout("rndT()", 2000);
        }

        $(document).ready(function () {
            t = $("#tst").procent(40, null);

            //setTimeout("rndT()", 2000);

            //t.change(80);
            $("#tst3").procent(53, {
                'bgLightColor': 'Lime',
                'bgDarkColor': 'Green'
            });
        });

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="width: 400px; margin: auto">
        <table>
        <tr>
            <td class="largeFont" style="padding: 3px;">
                <span  style="padding: 10px;">
                    30
                    <span class="smallFont">30 out of 46</span>
                </span>
            </td>
            <td style="width: 5px; border: 1px solid Red">&nbsp;</td>
            <td class="largeFont" style="padding: 3px;">
                <span class="ui-state-default ui-corner-all" style="padding: 10px;">
                    18
                    <span class="smallFont">18 out of 42</span>
                </span>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                
                <br /><br />

                <div style="position: relative; padding: 1px; border: 1px solid Black; width: 120px; height: 17px;">
                    <!-- Text -->
                    <div style="overflow: hidden; width: 50px; height: 17px; position: relative;">
                        <div style="overflow: hidden; width: 120px; position: relative; left: -70px; background-color: Orange">
                            <div style="position: relative; left: 70px;">
                                <span style="color: White">You should improuve stuff</span>
                            </div>
                        </div>
                    </div>
                    <!-- Text shadow -->
                    <div style="overflow: hidden; width: 70px; height: 17px; position: relative; top: -17px; left: 50px;">
                        <div style="position: relative; left: -50px; width: 120px; background-color: Yellow">
                            <span style="color: Gray">You should improuve stuff</span>
                        </div>
                    </div>
                </div>


                <div id="tst" style="width: 300px;">This is just a test!</div>
                <div id="tst3" style="width: 120px;">OK</div>

                <!--
                <div style="margin-top: 10px; clear: both; width: 120px;">
                    <div style="padding: 1px; border: 1px solid Black; width: 50px; height: 17px; margin-left: 10px; float: left; background-color: Green"></div>
                    <div style="padding: 1px; border: 1px solid Black; width: 30px; height: 17px; float: left; background-color: Orange"></div>
                </div>
                -->
            </td>
        </tr>
        </table>
    </div>
    </form>
</body>
</html>
